<template>
  <div>
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="req.keyword"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 10px"
        size="small"
        @click="getCompanyBilledCases()"
      >
        搜索
      </el-button>
      <el-button
        type="warning"
        style="margin-left: 10px"
        size="small"
        @click="outputExcelVis = true"
      >
        案件成本导出
      </el-button>
    </div>
    <div class="main">
      <el-table
        style="overflow: auto"
        height="100%"
        :data="res.Items"
        stripe
        border
        highlight-current-row
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column label="案件信息" width="400px">
          <template slot-scope="scope">
            <el-tag type="default" v-if="!scope.row.CS_IncomeSured">
              待确认
            </el-tag>
            <el-tag type="success" v-if="scope.row.CS_IncomeSured">
              已确认
            </el-tag>
            <div v-if="scope.row.CS_No">流水号：{{ scope.row.CS_No }}</div>
            <div v-if="scope.row.CS_DisplayName">
              案件名：{{ scope.row.CS_DisplayName }}
            </div>
            <div>差旅性质：{{ scope.row.EXTY_EnumTxt }}</div>
          </template>
        </el-table-column>
        <el-table-column label="人员信息" width="400px">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Employees" :key="item.CSEP_ID">
              {{ item.CSEP_TypeDesc }}：{{
                item.CCV_TargetID == curEmp.CCV_TargetID ? '' : item.CMP_Name
              }}{{ item.USR_Name ? '[' + item.USR_Name + ']' : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收费项目">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Charges" :key="item.CSCG_ID">
              【{{ item.CHTY_EnumTxt }}】{{ item.CSCG_Fee }}元
            </div>
          </template>
        </el-table-column>
        <el-table-column label="应付款">
          <template slot-scope="scope">
            <div v-if="scope.row.Incomes.length == 0">未统计应付款</div>
            <div v-for="item in scope.row.Incomes" :key="item.CI_ID">
              【{{ item.CI_Name }}】{{ item.USR_Name }}{{ item.CI_Fee }}元
              <span
                style="color: red; font-size: 12px"
                v-if="item.CI_NotInFinanceCost"
              >
                不计入成本
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="利润" width="100">
          <template slot-scope="scope">{{ scope.row.ProfitSum }}元</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <div>
              <el-button
                @click="toCase(scope.row.CS_ID)"
                type="text"
                size="small"
                icon="el-icon-search"
                title="查看案件详情"
              >
                案件详情
              </el-button>
            </div>
            <div>
              <el-button
                @click="incomeSure(scope.row.CS_ID)"
                type="text"
                size="small"
                icon="el-icon-check"
                title="应付款确认"
                v-if="!scope.row.CS_IncomeSured"
              >
                应付款确认
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%; height: 40px">
      <div
        style="
          display: flex;
          padding: 10px 50px 0 5px;
          width: auto;
          float: right;
        "
      >
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="req.pageIndex"
          :total="res.Total"
          :page-size="req.pageSize"
          :page-sizes="[5, 10, 15]"
          @size-change="
            (val) => {
              req.pageSize = val
              getCompanyBilledCases()
            }
          "
          @current-change="getCompanyBilledCases()"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      title="导出提成"
      :visible.sync="outputExcelVis"
      width="400px"
      :modal-append-to-body="false"
      center
    >
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="关键字">
          <el-input
            placeholder="请输入关键字"
            v-model="excelReq.keyword"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="起始回款日期">
          <el-date-picker
            type="date"
            v-model="excelReq.accountDate1"
            placeholder="请选择起始回款日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px; margin-left: 10px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="截止回款日期">
          <el-date-picker
            type="date"
            v-model="excelReq.accountDate2"
            placeholder="请选择截止回款日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px; margin-left: 10px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="margin-left: 10px"
            size="small"
            @click="outputExcel"
          >
            确定
          </el-button>
          <el-button
            type="text"
            style="margin-left: 10px"
            size="small"
            @click="outputExcelVis = false"
          >
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCompanyBilledCases, incomeSure } from '@/api/finance/caseIncomeStas'
import { baseURL, tokenName, empIdName } from '@/config'
import axios from 'axios'

export default {
  data: function () {
    return {
      req: {
        pageIndex: 1,
        pageSize: 5,
        keyword: null,
      },
      res: {
        Items: [],
        Total: 0,
      },
      excelReq: {
        accountDate1: null,
        accountDate2: null,
        keyword: '',
      },
      outputExcelVis: false,
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  methods: {
    getCompanyBilledCases() {
      getCompanyBilledCases(this.req).then(({ data }) => {
        this.res = data
      })
    },
    toForm: function (formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toCase: function (caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    incomeSure(caseId) {
      this.$confirm(
        `确认后，后续将无法修改应付款数据，包括案件贡献率，是否确认？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        incomeSure(caseId).then(() => {
          this.getCompanyBilledCases()
        })
      })
    },
    outputExcel() {
      if (
        this.excelReq.keyword == null &&
        this.excelReq.accountDate1 == null &&
        this.excelReq.accountDate2 == null
      ) {
        this.$message('请选择导出日期或输入关键字')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post(
          '/api/Finance/CaseIncomeStas/OutputIncomeExcel',
          this.excelReq,
          config
        )
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '案件成本.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getCompanyBilledCases()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(75vh - 60px);
  overflow: auto;
}
</style>
